<template>
  <div class="custom-background">
    <h1>案件详情</h1>
    <table class="w-full border-collapse">
      <thead>
        <tr>
          <th class="border p-2">案件编号</th>
          <th class="border p-2">受理时间</th>
          <th class="border p-2">线索来源</th>
          <th class="border p-2">反映或涉及主要问题</th>
          <th class="border p-2">举报人姓名</th>
          <th class="border p-2">被举报人</th>
          <th class="border p-2">被举报人级别</th>
          <th class="border p-2">被举报人所在单位</th>
          <th class="border p-2">被举报人所属单位</th>
          <th class="border p-2">被举报人编号</th>
          <th class="border p-2">上级要求</th>
          <th class="border p-2">处置方式</th>
          <th class="border p-2">转办时间</th>
          <th class="border p-2">截止时间</th>
          <th class="border p-2">超期提醒（天）</th>
          <th class="border p-2">查办主体</th>
          <th class="border p-2">查办状态</th>
          <th class="border p-2">处理情况</th>
          <th class="border p-2">查结时间</th>
          <th class="border p-2">部职别</th>
          <th class="border p-2">人员类别</th>
          <th class="border p-2">问题线索类型</th>
          <th class="border p-2">类型</th>
          <th class="border p-2">重信</th>
          <th class="border p-2">数量</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="detail in disciplineDetails" :key="detail.id">
          <td class="border p-2">{{ detail.case_id }}</td>
          <td class="border p-2">{{ detail.accept_time }}</td>
          <td class="border p-2">{{ detail.source?.name }}</td>
          <td class="border p-2">{{ detail.problem }}</td>
          <td class="border p-2">{{ detail.provider_name }}</td>
          <td class="border p-2">{{ detail.unit_number?.target_unit.full_name }}</td>
          <td class="border p-2">{{ detail.target_level }}</td>
          <td class="border p-2">{{ detail.target_unit }}</td>
          <td class="border p-2">{{ detail.belong_unit }}</td>
          <td class="border p-2">{{ detail.target_id_number }}</td>
          <td class="border p-2">{{ detail.superior_request }}</td>
          <td class="border p-2">{{ detail.processing?.name }}</td>
          <td class="border p-2">{{ detail.transfers_limit }}</td>
          <td class="border p-2">{{ detail.deadline }}</td>
          <td class="border p-2">{{ detail.overdue_reminders }}</td>
          <td class="border p-2">{{ detail.processing_subject?.name }}</td>
          <td class="border p-2">{{ detail.processing_status?.name }}</td>
          <td class="border p-2">{{ detail.final_result }}</td>
          <td class="border p-2">{{ detail.final_time }}</td>
          <td class="border p-2">{{ detail.dept_level }}</td>
          <td class="border p-2">{{ detail.personnel_category?.name }}</td>
          <td class="border p-2">
            <span v-for="type in detail.question_type" :key="type.id">{{ type.name }}<br /></span>
          </td>
          <td class="border p-2">{{ detail.report_type }}</td>
          <td class="border p-2">{{ detail.zhong_xin }}</td>
          <td class="border p-2">{{ detail.number }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import axios from 'axios';

interface DisciplineDetail {
  id: number;
  case_id: string | null;
  accept_time: string | null;
  source: { name: string } | null;
  problem: string | null;
  provider_name: string | null;
  unit_number: {
    target_level: { full_name: string };
    target_unit: { full_name: string };
    belong_unit: { full_name: string };
    unit_number: string;
  } | null;
  target_level: string | null;
  target_unit: string | null;
  belong_unit: string | null;
  target_id_number: string;
  superior_request: string | null;
  processing: { name: string } | null;
  transfers_limit: string | null;
  deadline: string | null;
  overdue_reminders: string | null;
  processing_subject: { name: string } | null;
  processing_status: { name: string } | null;
  final_result: string | null;
  final_time: string | null;
  dept_level: string | null;
  personnel_category: { name: string } | null;
  question_type: { id: number; name: string }[];
  report_type: string | null;
  zhong_xin: string | null;
  number: number | null;
}

const disciplineDetails = ref<DisciplineDetail[]>([]);

const fetchDisciplineDetails = async () => {
  try {
    const response = await axios.get('/api/discipline-details/');
    disciplineDetails.value = response.data;
  } catch (error) {
    console.error('Error fetching discipline details:', error);
  }
};

onMounted(() => {
  fetchDisciplineDetails();
});
</script>

<style scoped>
.custom-background {
  background-image: url('@/assets/png/首页背景图.jpg'); /* 设置背景图片 */
  background-size: cover; /* 使背景图片覆盖整个元素 */
  background-position: center; /* 使背景图片居中 */
  background-repeat: no-repeat; /* 防止背景图片重复 */
  height: 100vh; /* 确保背景覆盖整个视口高度 */
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  color: white; /* 设置文本颜色为白色，以便在背景图片上可见 */
}

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

th {
  background-color: #f2f2f2;
}
</style>
